<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生界面</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .nav-bar ul {
            display: flex;
            align-items: center; /* 垂直居中对齐 */
        }

        .welcome-info {
            margin-left: auto; /* 将欢迎信息推到右边 */
            margin-right: 20px; /* 与退出登录按钮保持一定距离 */
            color: inherit; /* 继承导航栏的文字颜色 */
        }
    </style>
</head>
<body>
<nav class="nav-bar">
    <ul>
        <li><a href="#" onclick="showPersonalInfo()">个人信息</a></li>
        <li><a href="#" onclick="showGrades()">成绩查询</a></li>
        <li><a href="#" onclick="showCourseSelection()">选课系统</a></li>
        <li><a href="#" onclick="showSchedule()">课表查看</a></li>
        <li id="welcomeMessage" class="welcome-info"></li>
        <li><a href="../index.html">退出登录</a></li>
    </ul>
</nav>
<div class="main-content" id="mainContent">
    <!-- 内容将通过JavaScript动态加载 -->
</div>
<script src="../js/student.js"></script>
<script>
    // 页面加载时获取学生信息
    window.onload = function() {
        fetch('../personalInfo.student')
            .then(response => response.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const sname = doc.querySelector('input[name="sname"]')?.value;
                if (sname) {
                    document.getElementById('welcomeMessage').textContent =
                        `欢迎${sname}同学访问教务系统`;
                } else {
                    throw new Error('未找到学生姓名');
                }
            })
            .catch(error => {
                console.error('获取学生信息失败:', error);
                document.getElementById('welcomeMessage').textContent =
                    '欢迎访问教务系统';
            });
    };
</script>
</body>
</html>